<template>
    <el-dialog
        v-model="showDialog"
        title="选择视图"
        width="380px"
        top="56px"
        append-to-body
        destroy-on-close
        @close="onClose"
    >
        <div :style="phoneBackgrounStyle" class="function-view-control">
            <el-scrollbar
                ref="scroll"
                always
                height="100%"
            >
                <template v-for="(item, index) in widgetList">
                    <div v-if="item.eles.type !== 'custom-top-nav'" class="content-item">
                        <widget-view
                            :element="item"
                            preview
                            @select-widget="onSelectWidget"
                        />
                    </div>
                </template>
            </el-scrollbar>
        </div>
    </el-dialog>
</template>

<script>
import { defineComponent, ref, computed, nextTick } from 'vue'
import { useEditStore } from '@/store'
import { randomStr } from '@/libs/tools'
import useWidget from '@/libs/edit/widgetData'
import bus from '@/libs/bus'
export default defineComponent({
    name: 'FunctionViewControl',
    setup() {
        const editStore = useEditStore()

        const {
            widgetList
        } = useWidget()

        const busId = randomStr(16)
        const showDialog = ref(false)
        const scroll = ref(null)

        const pageData = computed(() => editStore.pageData)
        // 背景样式
        const phoneBackgrounStyle = computed(() => {
            const backgroundColor = pageData.value.customFeature['background-color']
            const backgroundImage = pageData.value.customFeature['background-image']
            return {
                backgroundColor,
                backgroundImage: backgroundImage ? `url(${backgroundImage})` : ''
            }
        })

        const show = id => {
            showDialog.value = true
            nextTick(() => {
                let top = 0
                let dom = document.getElementById(`widget-view-preview-${id}`)
                dom?.classList?.add('active')
                while((dom !== scroll.value?.$el) && !!dom) {
                    top += dom?.offsetTop || 0
                    dom = dom.offsetParent
                }
                scroll.value.setScrollTop(top)
            })
            return new Promise((resolve, reject) => {
                bus.on(`${busId}-confirm`, widgetId => {
                    showDialog.value = false
                    resolve(widgetId)
                })
                bus.on(`${busId}-cancel`, () => {
                    showDialog.value = false
                    reject()
                })
            })
        }

        const onClose = () => {
            bus.off(`${busId}-confirm`)
            bus.off(`${busId}-cancel`)
        }

        const onSelectWidget = widgetId => {
            bus.emit(`${busId}-confirm`, widgetId)
        }

        return {
            showDialog,
            scroll,

            widgetList,
            phoneBackgrounStyle,

            show,
            onClose,
            onSelectWidget
        }
    }
})
</script>

<style lang="less" scoped>
@import './function-view-control.less';
</style>